<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>考勤看板</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="attendance-board">
      <div class="title">
        <span class="company">{{comapnyName}}</span>
        <div class="btns">
          <el-button size="small" @click="lookDayAttendance">查看当日考勤</el-button>
          <el-button size="small" @click="toBack">回到首页</el-button>
        </div>
      </div>
      <div class="attendance-board-content">
        <div class="dept-attendance">
          <dept-attendance-item v-if="deptAttendanceList!==null" :attendance-data="deptAttendanceList"></dept-attendance-item>
        </div>
        <div class="attendance-stat">
          <attendance-stat-item v-if="attendanceStatData!==null" :attendance-data="attendanceStatData"></attendance-stat-item>
        </div>
      </div>
    </div>
  </div>
</body>

<script src="https://upload.shinehao.com.cn/20190223085008echarts.min.4.2.1-rc.1.js"></script>
<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "./css/attendanceStatItem.css"
  ], [
    "/vueSystem/models/baseModel.js"
  ]);
</script>
<script src="./models/deptAttendanceModel.js"></script>
<script src="./models/attendanceStat.js"></script>
<script src="./scrollText.js"></script>
<script src="./deptAttendanceItem.js"></script>
<script src="./attendanceStatItem.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: function () {
      return {
        loading: false,
        basePath: SysUtil.getBasePath(),
        comapnyName: '',
        deptAttendanceList: null,
        attendanceStatData: null
      };
    },
    created: function () {
      this.loading = true;
      var self = this;
      return Promise.all([
        this.setComapnyName(),
        this.setAttendanceData()
      ]).then(function () {
        self.loading = false;
        self.boardRuning();
      }).catch(function () {
        self.loading = false;
      });
    },
    methods: {
      setComapnyName: function () {
        var self = this;
        return ajaxRequest('user/getUserName').then(function (user) {
          self.comapnyName = user.company;
          return user;
        });
      },

      setAttendanceData: function () {
        var self = this;
        return Promise.all([
          ajaxRequest('attendance/getWorkshopAttendanceBoard', {}, false, false),
          ajaxRequest('attendance/getCurrentDayAttendInfoBoard', {}, false, false)
        ]).then(function (res) {
          var res1 = res[0];
          var res2 = res[1];
          if (!res1.result || !res2.result) {
            var msg = res1.info || res2.info;
            self.$alert(msg, '信息');
            return;
          }
          var workshopAttendance = res1.data;
          var deptAttendanceList = workshopAttendance.workshopAttendBoardList;
          deptAttendanceList = _.map(deptAttendanceList, function (deptAttendance) {
            deptAttendance = new DeptAttendanceModel(deptAttendance);
            return deptAttendance;
          });
          self.deptAttendanceList = deptAttendanceList;

          var abnormalAttendance = res2.data;
          var attendanceStatData = new AttendanceStat(workshopAttendance, abnormalAttendance);
          self.attendanceStatData = attendanceStatData;
          return res;
        });
      },

      boardRuning:function(){
        var self = this;
        setTimeout(function(){
          self.setAttendanceData();
          self.boardRuning();
        }, 15 * 60 * 1000);
      },

      toBack: function () {
        var basePath = this.basePath;
        location.href = basePath + "/datav/index.html?autoLogin=autoLogin";
      },

      lookDayAttendance:function(){
        var basePath = this.basePath;
        location.href = basePath + "/attendanceMgr/dayAttendanceBoard/index.html?autoLogin=autoLogin";
      }
    },
    components: {
      DeptAttendanceItem: DeptAttendanceItem,
      AttendanceStatItem: AttendanceStatItem
    }
  });
</script>
<style>
  .attendance-board {
    width: 100%;
    height: 100%;
    background: #0E2A43;
  }

  .attendance-board .title {
    height: 43px;
    text-align: center;
    background-size: 176px 40px;
    background-repeat: no-repeat;
    background-color: #000;
    position: relative;
  }

  .attendance-board .company {
    color: #ffffff;
    font-size: 20px;
    line-height: 43px;
  }

  .attendance-board .title .btns {
    position: absolute;
    right: 10px;
    top: 0;
    padding-top: 5px;
  }

  .attendance-board .attendance-board-content {
    height: calc(100% - 43px);
  }

  .attendance-board .attendance-board-content .dept-attendance {
    height: calc(100% - 100px);
  }

  .attendance-board .attendance-board-content .attendance-stat {
    height: 80px;
    padding: 10px;
  }
</style>

</html>